<script setup name="dept" lang="ts">

import {listDept} from "@/api/system/dept"
import {getDemo3, updateDemo3} from '@/api/demo/demo3';
import {Demo3Form, Demo3VO} from "@/api/demo/demo3/types";
import {DeptVO} from "@/api/system/dept/types";

const {proxy} = getCurrentInstance() as ComponentInternalInstance;

const props = defineProps({
  searchType: {
    type: Number,
    default: 1
  },
  demo3: {
    type: Object as PropType<Demo3VO>,
    default: null
  },
});


const pd = reactive({
      deptOptions: <DeptVO[]>([]),
      deptList: <DeptVO[]>([]),
      deptIds: <(string | number)[]>([]),
      defaultProps: {
        children: 'children',
        label: 'deptName'
      },
      expand: false,
      nodeAll: false,
      checkStrictly: false,
      form: <Demo3Form>{},
      loading: false,
      open: false,
      total: 0,
    }
);

defineExpose({
  getDeptList
});

async function getDeptList() {
  pd.loading = true;
  const res = await listDept();
  pd.deptList = res.data;
  const data = proxy?.handleTree<DeptVO>(res.data, "deptId")
  if (data) {
    pd.deptOptions = data
  }
  pd.total = res.total;
  pd.loading = false;
  setTreeChecked();
  pd.open = true;
}

async function setTreeChecked() {
  const result = await getDemo3(props.demo3.id)
  pd.deptIds = result.data.deptIds;
  pd.deptIds.forEach((v) => {
    (proxy?.$refs['treeSelectManyRef'] as any).setChecked(v, true, false);
  });
}


/** 树权限（展开/折叠）*/
function handleCheckedTreeExpand(value: boolean) {
  for (var i in (proxy?.$refs['treeSelectManyRef'] as any).store.nodesMap) {
    (proxy?.$refs['treeSelectManyRef'] as any).store.nodesMap[i].expanded = value;
  }
}

/** 树权限（全选/全不选） */
function handleCheckedTreeNodeAll(value: boolean) {
  (proxy?.$refs['treeSelectManyRef'] as any).setCheckedNodes(value ? pd.deptList : []);
}

/** 树权限（父子联动） */
function handleCheckedTreeConnect(value: boolean) {
  pd.checkStrictly = value ? true : false;
}

/** 提交按钮 */
async function submitForm() {
  // 目前被选中的节点
  let checkedKeys = (proxy?.$refs['treeSelectManyRef'] as any).getCheckedKeys();
  // 半选中的节点
  let halfCheckedKeys = (proxy?.$refs['treeSelectManyRef'] as any).getHalfCheckedKeys();
  pd.form.id = props.demo3.id;
  pd.form.name = props.demo3.name;
  pd.form.status = props.demo3.status;
  pd.form.remark = props.demo3.remark;
 pd.form.deptIds = checkedKeys;
  await updateDemo3(pd.form)
  proxy?.$modal.msgSuccess("修改成功");
  await getDeptList();
}

/** 关闭弹窗 */
function exit() {
  pd.open = false;
  pd.expand = false;
  pd.nodeAll = false;
  pd.checkStrictly = false;
}
</script>

<template>
  <div>
    <el-link v-if="props.searchType===1" type="primary" @click="getDeptList">
      {{ props.demo3.remark }}
    </el-link>
    <el-dialog title="关联部门" v-model="pd.open" width="500px" append-to-body>
      <el-checkbox v-model="pd.expand" @change="handleCheckedTreeExpand">展开/折叠</el-checkbox>
      <el-checkbox v-model="pd.nodeAll" @change="handleCheckedTreeNodeAll">全选/全不选</el-checkbox>
      <el-checkbox v-model="pd.checkStrictly" @change="handleCheckedTreeConnect">父子联动</el-checkbox>
      <el-tree
          :data="pd.deptOptions" :props="pd.defaultProps" ref="treeSelectManyRef"
          show-checkbox node-key="deptId" empty-text="加载中，请稍候"
          :check-strictly="!pd.checkStrictly"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" @click="submitForm">修 改</el-button>
          <el-button type="info" @click=exit()>关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>
